<template>
    <div @click="handleSelect()" :class="['vehicletype__card', (id == this.value.id) ? 'active': '']">
        <div class="vehicletype__card__image">
            <span v-if="!(this.value && this.value.carImage)" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="imgView" width="100%" alt=""/>
        </div>
        <div class="vehicletype__card__detail">
            <div class="vehicletype__card__detail__item">
                <span>类型名称:</span>
                <span>{{  value.carTypeCode  }}</span>
            </div>
            <div class="vehicletype__card__detail__item">
                <span>类型编号:</span>
                <span>{{  value.carTypeName  }}</span>
            </div>
            <!-- <div class="vehicletype__card__detail__item">
                <span>押金:</span>
                <span>{{  value.deposit  }}元</span>
            </div> -->
        </div>
    </div>
</template>

<script>
import { getFileAccessHttpUrl } from '@/api/manage'
export default {
    name: "VehicleTypeCard",
    props:{
        value:{
            type: Object,
            default: () => {}
        },
        id:{
            type: String,
            default: ""
        },
    },
    data(){
        return {
          
        }
    },
    watch:{
      
    },
    computed:{
         imgView(){
            if(this.value && this.value.carImage  && this.value.carImage.indexOf(",")>0){
                this.value.carImage = this.value.carImage.substring(0,this.value.carImage.indexOf(","))
            }
            return getFileAccessHttpUrl(this.value.carImage)
        },
    },
    mounted(){

    },
    methods:{
        handleSelect(){
            console.log("handleSelect:", this.value);
            this.$emit("change", this.value);
            this.$emit("update:id", this.value.id);
        }
    }
}
</script>

<style lang="less" scoped>
.vehicletype__card{
    width: calc(33.3% - 40px);
    margin: 20px;
    padding: 20px;
    background-color: #FFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    &:hover{
        cursor: pointer;
        box-shadow: 0px 4px 20px -4px rgba(0, 0, 0, 0.5);
    }
    &.active{
        box-shadow: 0px 4px 20px -4px rgba(4, 245, 104, 0.826);
    }
    .vehicletype__card__image{
        width: 100%;
        height: 250px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .vehicletype__card__detail{
        margin-top: 10px;
        .vehicletype__card__detail__item{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
    }
}
</style>